<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-07-10 09:19:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-11 15:39:05
 * @FilePath: \cip-admin\src\pages\company\information\equipment\components\filter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import {
	DEVICE_STATUS_OPTIONS,
	EQUIPMENT_TYPE_OPTIONS,
} from "@/config/enum-map";

import { injectState } from "../state";

defineOptions({ name: "Filters" });

const {
	filter,
	page: { isLoading },
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const checkDate = computed({
	get() {
		const { checkDateStart, checkDateEnd } = data.value;
		const res: string[] = [];
		checkDateStart && res.push(dayjs(checkDateStart).format("YYYY-MM-DD"));
		checkDateEnd && res.push(dayjs(checkDateEnd).format("YYYY-MM-DD"));
		return res;
	},
	set(val) {
		data.value.checkDateStart = val?.[0];
		data.value.checkDateEnd = val?.[1];
	},
});

const search = () => {
	filter.value = { ...toRaw(data.value) };
};

const reset = () => {
	data.value = { ...initial };
};
</script>

<template>
	<el-form class="filter-form" inline :model="data" :disabled="isLoading">
		<el-form-item label="所属类型">
			<el-select-v2
				v-model="data.type"
				:options="EQUIPMENT_TYPE_OPTIONS"
				w="240px!"
				clearable
			/>
		</el-form-item>
		<el-form-item label="运行状态">
			<el-select-v2
				v-model="data.status"
				:options="DEVICE_STATUS_OPTIONS"
				w="240px!"
				clearable
			/>
		</el-form-item>
		<el-form-item label="检验日期">
			<el-date-picker
				v-model="checkDate"
				value-format="YYYY-MM-DD"
				type="daterange"
				clearable
				start-placeholder="开始日期"
				end-placeholder="结束日期"
			/>
		</el-form-item>
		<el-form-item>
			<el-input
				v-model="data.name"
				placeholder="搜索"
				class="w-240px!"
				clearable
			>
				<template #prefix>
					<el-icon class="i-custom:search" />
				</template>
			</el-input>
		</el-form-item>
		<el-form-item>
			<el-divider direction="vertical" h="32px!" m="r-22px!" />
			<el-button type="primary" :loading="isLoading" @click="search">
				<template #icon>
					<el-icon class="i-custom:search" />
				</template>
				查询
			</el-button>
			<el-button @click="reset">
				<template #icon>
					<el-icon class="i-custom:reset" />
				</template>
				重置
			</el-button>
		</el-form-item>
	</el-form>
</template>
